<template>
  <div class="page">
    <h4 style="margin-left: 3px">基本信息筛选</h4>
    <el-row :gutter="20">
      <el-form id="formbox" ref="formInline" :inline="true" :model="formInline">
        <el-col :span="8" class="mb20">
          <el-form-item label="姓名 :" prop="name">
            <el-input
              clearable
              v-model="formInline.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="证件号码 :" prop="cardNumber">
            <el-input
              clearable
              v-model="formInline.cardNumber"
              placeholder="请输入证件号码"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="登记医生 :" prop="inputPerson">
            <el-input
              clearable
              v-model="formInline.inputPerson"
              placeholder="请输入登记医生"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="病种 :" prop="result">
            <el-select v-model="formInline.result" placeholder="请选择病种">
              <el-option label="高血压" value="高血压"></el-option>
              <el-option label="糖尿病" value="糖尿病"></el-option>
              <el-option label="高糖" value="高糖"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="随访日期 :" prop="testDate">
            <el-date-picker
             :disabled-date="disableFutureDates"
              v-model="formInline.testDate"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" class="mb20">
          <el-form-item label="创建时间 :" prop="importDate">
            <el-date-picker
             :disabled-date="disableFutureDates"
              v-model="formInline.importDate"
              type="daterange"       
              value-format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              size="large"
            />
          </el-form-item>
        </el-col>
      
       
        <el-col :span="24" class="form-button">
          <el-form-item>
            <el-button type="primary" @click="getList()">查询</el-button>
            <el-button @click="onReset('formInline')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="table-container">
      <el-col :span="24"
        ><h4 style="margin-left: 3px;">历史随访记录 (共{{ total }}条)</h4></el-col
      >
      <el-col :span="24" style="display: flex">
        <el-col :span="4">
          <div class="table-btn">
            <div>
              <el-checkbox
                @change="checkedAllChange"
                v-model="checkedAll"
                :label="'全选'"
                :disabled="tableData.length == 0"
              />
            </div>
            <div style="margin-right: 10px">
              <label
                >已选择<el-text type="primary">{{
                  checkedAll == true ? selectionCount : multipleSelection.length
                }}</el-text
                >条</label
              >
            </div>
          </div>
        </el-col>
        <el-col :span="20" class="tr">
        
          
          <el-button
            style="width: 87.6px"
            type="primary"
            @click="importSelect()"
            >导入</el-button
          >
          <el-button
            style="width: 87.6px;color: #fff;"
            type="primary"
            :disabled="multipleSelection.length === 0"
            @click="exportSelect()"
            >导出</el-button
          >

          <el-button
            :disabled="multipleSelection.length === 0"
           type="danger"
            @click="testSt()"
           style="width: 87.6px;color: #fff;"
            >删除</el-button
          >
          <el-button  style="width: 95px" type="success" @click="exportRecord()">下载导入模版</el-button>
         
        </el-col>
      </el-col>
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      border
      :default-sort="{ prop: 'date', order: 'descending' }"
      style="width: 100%"
      tooltip-effect="light"
      row-key="id"
      @selection-change="handleSelectionChange"
      :header-cell-class-name="setClassName"
       max-height="470px"
    >
      <!-- v-loading="loading" -->
      <el-table-column
        type="selection"
        :reserve-selection="true"
        width="55"
       align="center"
      />
      <el-table-column type="index" label="序号" width="80" align="center"    fixed="left"/>
      <el-table-column
        prop="name"
        label="姓名"
        align="center"
        show-overflow-tooltip
        fixed="left"
   
      />
      <el-table-column
        prop="cardNumber"
        label="证件号码"
        align="center"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        prop="gender"
        label="性别"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="birthday"
        label="出生日期"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="phoneNumber"
        label="联系电话"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="address"
        label="现住址"
        align="center"
        width="180"
        show-overflow-tooltip
      />
   
      <el-table-column
        prop="specialFileDate"
        label="专案日期"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="followTime"
        label="随访日期"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="followType"
        label="随访类型"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="followWay"
        label="随访方式"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="followInstitution"
        label="随访机构"
        align="center"
        width="200"
        show-overflow-tooltip
      />
      <el-table-column
        prop="manageInstitution"
        label="管理机构"
        align="center"
        width="200"
        show-overflow-tooltip
      />
      <el-table-column
        prop="diseaseType"
        label="病种"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="symptom"
        label="症状"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="systolicPressure"
        label="收缩压(mmHg)"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="diastolicPressure"
        label="舒张压(mmHg)"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="diagnosisSystolicPressure"
        label="门诊收缩压(mmHg)"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="diagnosisDiastolicPressure"
        label="门诊舒张压(mmHg)"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="heartRate"
        label="心率(次/分)"
        align="center"
        width="78"
        show-overflow-tooltip
      />
      <el-table-column
        prop="height"
        label="身高(cm)"
        align="center"
        width="80"
        show-overflow-tooltip
      />
      <el-table-column
        prop="weight"
        label="当前体重(kg)"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="targetWeight"
        label="目标体重(KG)"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="bmi"
        label="当前BMI"
        align="center"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        prop="targetBmi"
        label="目标BMI"
        align="center"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        prop="arteryPulsation"
        label="足背动脉搏动"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="waist"
        label="其他体征"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="dailySmoke"
        label="当前日吸烟量(支)"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="targetSmoke"
        label="目标日吸烟量(支)"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="dailyDrink"
        label="当前日饮酒量(两)"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="targetDrink"
        label="目标日饮酒量(两)"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="dailyExerciseFrequency"
        label="当前运动(次/周)"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="targetExerciseFrequency"
        label="目标运动(次/周)"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="dailyExerciseTime"
        label="当前运动(分钟/次)"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="targetExerciseTime"
        label="目标运动(分钟/次)"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="saltRelated"
        label="当前摄盐情况"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="targetRelated"
        label="目标摄盐情况"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="stapleFood"
        label="当前主食(克/天)"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="targetStapleFood"
        label="目标主食(克/天)"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="psychological"
        label="心理调整"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="complianceBehavior"
        label="遵医行为"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="fastingBloodGlucose"
        label="空腹血糖(mmol/L)"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="diagnosisBloodGlucose"
        label="门诊血糖(mmol/L)"
        align="center"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="glycosylatedHemoglobin"
        label="糖化血红蛋白(%)"
        align="center"
        width="90"
        show-overflow-tooltip
      />
      <el-table-column
        prop="glycosylatedHemoglobinDate"
        label="糖化血红蛋白检查日期"
        align="center"
        width="110"
        show-overflow-tooltip
      />
      <el-table-column
        prop="otherAuxiliaryExaminations"
        label="其他辅助检查"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="medicationCompliance"
        label="服药依从性"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="adverseDrugReactions"
        label="药物不良反应"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="hypoglycemicReactions"
        label="低血糖反应"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="classFollow"
        label="此次随访分类"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="medicationSituation"
        label="用药情况"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="insulinUsage"
        label="胰岛素使用情况"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="referralInstitution"
        label="转诊机构"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="referralReason"
        label="转诊原因"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="nextFollowTime"
        label="下次随访日期"
        align="center"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        prop="remark"
        label="备注"
        align="center"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        prop="qualityControlResults"
        label="质控结果描述"
        align="center"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        prop="responsibleDoctor"
        label="责任医生"
        align="center"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        prop="registeredDoctor"
        label="登记医生"
        align="center"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="150"
        show-overflow-tooltip
      />

 
      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="100"
        align="center"
        fixed="right"
      >
        <template #default="scope">
          <el-button
            text=""
            size="small"
            type="danger"
            @click="delFollow(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" style="display: flex; justify-content: end;margin-bottom: 50px;">
      <el-pagination
        v-if="this.total > 0"
        v-model:currentPage="this.page"
        v-model:page-size="this.size"
        :total="this.total"
        :page-sizes="[10, 20, 50, 100, 500]"
        class="new-pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </el-col>
 
   <DrugDialog   ref="drugDialogRef" :state="state" @changeDrug="handleChangeDD"></DrugDialog>
  
    <!--@reloadTable="handleQuery" -->
  </div>
  
</template>

<script lang="ts">
import http from "@/utils/request";
import { ElMessage } from "element-plus";
import MenuCheck from "@/components/menu-check/index.vue";
import DeptList from "@/components/dept-list/index.vue";
import DrugDialog from "@/pages/examples/historical/components/drugDialog.vue";
const disableFutureDates = (time) =>  time > new Date();

export default {
  components: {
    MenuCheck,
    DeptList,
 
    DrugDialog
  },
  emits:['changeDrug'],
  data() {
    return {

      //记录条数
      total: 1,
      //每页条数
      size: 10,
      //当前页码
      page: 1,
      //选择条数
      selectionCount: 0,
      //选择数组
      multipleSelection: [],
      //全选状态
      checkedAll: false,
     
      state:{
        dialogUploadVisible: false,
        accept:'.xlsx,.csv'
      },
      //表格数据
      tableData: [
      ],
      ruleform: {
        name: "",
      },
      formInline: {
        //姓名
        name: "",
        //证件号码
        cardNumber: "",
        //录入人
        inputPerson: "",
        //检验日期
        testDate: '',
        followBeginTime: "",
        followEndTime: "",
        //导入日期
        importDate: '',
        createBeginTime: "",
        createEndTime: "",       
        // 质控类型
        result: "", 
      },
    };
  },
  methods: {
    disableFutureDates,
    handleChangeDD(newValue, oldValue){
      console.log('newValue',newValue);
     this.state.dialogUploadVisible = newValue;
     this.getList();
    },
  
    //获取列表
    getList(){
      const requestData = { page: this.page, size: this.size };
      for (const key in this.formInline) {
        if (this.formInline[key]) {
          requestData[key] = this.formInline[key];
        }
      }
      //@ts-ignore
      if(requestData.testDate){
           //@ts-ignore
        requestData.followBeginTime=requestData.testDate[0];
        //@ts-ignore
        requestData.followEndTime=requestData.testDate[1];
          //@ts-ignore
          delete requestData.testDate;
      }
       //@ts-ignore
       if(requestData.importDate){
          //@ts-ignore
        requestData.createBeginTime=requestData.importDate[0];
          //@ts-ignore
        requestData.createEndTime=requestData.importDate[1];

        //@ts-ignore
        delete requestData.importDate;
        
      }
      console.log(requestData);
      
      
      http.post('/followRecordHistory/getPageList',requestData).then((res)=>{
        //@ts-ignore
        if(res.code==200){
          this.tableData=res.data.list;
          this.total=res.data.total;
        }
      })
    },
    //重置搜索
    onReset(formName) {
      this.$refs[formName].resetFields();
      this.formInline.testDate = "";
      this.formInline.importDate = "";
      this.page = 1;
    },

    //删除随访
    delFollow(row) {
      const idList=[row.id];
      this.$confirm(`确定删除${row.name}的历史随访记录吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          http.post("/followRecordHistory/deleteList", idList).then((res) => {
            //@ts-ignore
            if (res.code == 200) {
              this.getList();
               //@ts-ignore
               ElMessage.success(res.message);
               this.$refs.multipleTableRef!.clearSelection();
            }
          });
       
        })
        .catch(() => {});
    },
    // 改变页面容量
    handleSizeChange(val: number) {
      this.size = val;
      this.getList();
    },

    // 改变页码序号
    handleCurrentChange(val: number) {
      this.page = val;
      this.getList();
     
    },
    checkSelectable() {
      return this.checkedAll != true;
    },
    checkedAllChange() {
      if (this.checkedAll == true) {
        this.selectionCount = this.tableData.length;
        console.log(this.selectionCount);

        this.tableData.forEach((row: any) => {
          this.$refs.multipleTableRef!.toggleRowSelection(row, true);
        });
      } else {
        this.selectionCount = 0;
        this.$refs.multipleTableRef!.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      
      if(val.length==this.total||val.length==this.size){
        this.checkedAll = true;
        this.selectionCount=val.length;
      }else{
        this.checkedAll = false;
        this.selectionCount=0;
      } 
    },
    setClassName({ column }) {
      return this.checkedAll == true ? "all-disabled" : "";
    },
 
    exportRecord(){
    http.post('/followRecordHistory/initializeExcelTemplate').then((res)=>{
      //@ts-ignore
      if(res.code==200){ 
          //@ts-ignore
          window.open(res.data);
        //@ts-ignore
       ElMessage.success(res.message);
      }
    })
    },
    //导入
    importSelect(){
       this.state.dialogUploadVisible=true;
    },
    //导出
    exportSelect(){
     let idList=this.multipleSelection.map(item=>item.id);
     http.post('/followRecordHistory/exportToExcel',idList).then((res)=>{
      //@ts-ignore
      if(res.code==200){ 
         //@ts-ignore
         ElMessage.success(res.message);
          this.multipleSelection=[];
          this.checkedAll=false;
          this.$refs.multipleTableRef.clearSelection();
          window.open(res.data);
      }
    })
     
    },
    //删除
    testSt(){ 
           const idList=this.multipleSelection.map(item=>item.id);
      this.$confirm("是否确定删除已选择数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          http.post("/followRecordHistory/deleteList", idList).then((res) => {
            //@ts-ignore
            if (res.code == 200) {
               //@ts-ignore
              ElMessage.success(res.message);
              this.multipleSelection=[];
              this.getList();
              this.$refs.multipleTableRef!.clearSelection();
            }else{
              //@ts-ignore
              ElMessage.error(res.message);
            }
          });
       
        })
        .catch(() => {});
    },
  
  },
  computed: {},
  created() {
    this.getList();
  },
};
</script>
<style scoped>
.page {
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
}
#formbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30px;
}
.upload-demo {
  width: 100%;
  border: 2px dashed #d9d9d9;
  text-align: center;
  padding: 40px 20px;
}
.mb20 {
  /* margin: 0 20px; */
}
:deep(.el-input__wrapper) {
  width: 230px;
}
:deep(.el-form-item .el-select__wrapper) {
  min-height: 32px;
  width: 252px;
}
:deep(.el-range-editor--large.el-input__wrapper) {
  height: 32px;
  width: 232px;
}
.form-button {
  display: flex;
  justify-content: end;
}
.table-container {
  display: flex;
  flex-direction: column;
}
.table-btn {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-around;
}
.tr {
  text-align: right;
  height: 50px;
  line-height: 50px;
}
::v-deep .all-disabled .el-checkbox__input .el-checkbox__inner {
  display: none;
}

.new-pagination {
  margin: 30px 0 10px 0 !important;
}
</style>
